<template>
    <div class="leftContentTwo">
        <!--第二部分-->
        <div class="bestCity">
            <div class="bestCityTitle">
                <!--宽窄竖线-->
                <div class="doubleLine lf">
                    <div class="wide lf"></div>
                    <div class="narrow lf"></div>
                </div>
                <!--最优城市-->
                <div class="bestCityP lf">
                    <div class="bestCityName lf">最优城市</div>
                </div>
            </div>
            <div class="threeLine">
                <div class="firstLine lf"></div>
                <div class="secondLine lf"></div>
                <div class="thirdLine lf"></div>
            </div>
            <ul class="cityAssess">
                <!-- <li class="lf"  v-for="(item, index) of HourBestCity" :key="index" @click="activeAssess(index, item.Lon, item.Lat);">
                    <div class="timeAssess">{{item.timeAssess}}</div>
                    <div class="itemCity"  :class="{'active' : index ==isActive }">{{item.City}}</div>
                    <div class="assessNum" :class="{'active' : index ==isActive }"><span>{{item.negative_K04}}</span>/{{item.MaxNegative_K04}}</div>
                </li> -->
                
                <li class="lf"  @click="activeAssess(HourBestCity.Lon, HourBestCity.Lat);">
                    <div class="timeAssess">小时评价</div>
                    <div class="itemCity active"  >{{HourBestCity.City}}</div>
                    <div class="assessNum active" ><span>{{parseInt(HourBestCity.negative_K04)}}</span>/{{parseInt(HourBestCity.MaxNegative_K04)}}</div>
                </li>
                <li class="lf"  @click="activeAssess(DayBestCity.Lon, DayBestCity.Lat);">
                    <div class="timeAssess">日评价</div>
                    <div class="itemCity"  >{{DayBestCity.City}}</div>
                    <div class="assessNum" ><span>{{parseInt(DayBestCity.negative_K04)}}</span>/{{parseInt(DayBestCity.MaxNegative_K04)}}</div>
                </li>
                <li class="lf"  @click="activeAssess( MonthBestCity.Lon, MonthBestCity.Lat);">
                    <div class="timeAssess">月评价</div>
                    <div class="itemCity"  >{{MonthBestCity.City}}</div>
                    <div class="assessNum" ><span>{{parseInt(MonthBestCity.negative_K04)}}</span>/{{parseInt(MonthBestCity.MaxNegative_K04)}}</div>
                </li>
                <li class="lf"  @click="activeAssess( QuarterBestCity.Lon, QuarterBestCity.Lat);">
                    <div class="timeAssess">季度评价</div>
                    <div class="itemCity" >{{QuarterBestCity.City}}</div>
                    <div class="assessNum" ><span>{{QuarterBestCity.negative_K04==null?"暂无":parseInt(QuarterBestCity.negative_K04)}}</span>/{{QuarterBestCity.MaxNegative_K04==null?"暂无":parseInt(QuarterBestCity.MaxNegative_K04)}}</div>
                </li>
            </ul>
            <div class="drakYLine"></div>
            <div class="cityImg">
                <div class="firstImg lf" @click="handleBannerClick(imgs)">
                    <swiper  :options="swiperOptions">
                        <!-- slides -->
                        <swiper-slide v-for="(item, index) in imgs" :key="index">
                            <img class="gallary-img" style="width:1.96rem"  :src="item" >
                        </swiper-slide>
                        <!-- Optional controls -->
                        
                    </swiper>
                    <div class="zhezhao">图册</div>
                </div>
                <div class="secondImg lf" @click="handleBannerClick(imgs1)">
                    <swiper  :options="swiperOptions">
                        <!-- slides -->
                        <swiper-slide v-for="(item, index) in imgs1" :key="index">
                            <img class="gallary-img" style="width:1.96rem" :src="item">
                        </swiper-slide>
                        <!-- Optional controls -->
                        
                    </swiper>
                    <div class="zhezhao">图册</div>
                </div>
            </div>
        </div>
        <common-swiper @swiper="handleSwiperClick" v-if="isSwiper" :imgCross="imgCross"></common-swiper>
    </div>
</template>

<script>
    let echarts = require('echarts');
    import CommonSwiper from '../../commons/CommonSwiper'
    import axios from 'axios'
    export default {
        name: 'LeftContentTwo',
        components: {
            CommonSwiper
        },
        mounted(){
            $('.cityAssess li').click( function(  ) {
                $(this).siblings().children(".itemCity").removeClass('active');
                $(this).siblings().children(".assessNum").removeClass('active');
                $(this).children(".itemCity").addClass('active');
                $(this).children(".assessNum").addClass('active');
            })      
        },
        props:{
            //bestCityList:Array,
            HourBestCity:Object,
            DayBestCity:Object,
            MonthBestCity:Object,
            QuarterBestCity:Object
        },
        watch:{
            
        },
        data(){
            return{
                isActive: 0,
                isSwiper: false,  
                isCity: false,
                imgs:['/swiper2.jpg',"/swiper3.jpg",'/swiper4.jpg'],
                imgs1:['/swiper5.jpg',"/swiper6.jpg",'/swiper7.jpg'],
                imgCross:[],
                swiperOptions: {
                    pagination: '.swiper-pagination',
                    observer: true,
                    loop: true,
                    autoplay:3000,
                }
            }
            
        },
        methods: {
            //动态城市评价=
            
            activeAssess: function(x,y){
                
                this.$comjs.onCenter(x,y,50000)//定位到该城市。
            },
            handleBannerClick(imgs){
                this.imgCross = imgs
                this.isSwiper = true
            },
            handleSwiperClick(a){
                this.isSwiper = false
              
            }
        }
    }
</script>

<style lang="stylus" scoped>
    /* 样式穿透 .leftContentTwo >>> .littleLine */
    /* 所有样式 */
    .leftContentTwo
        width: 4.03rem
        height: 35.5vh
        color: white
        background :rgba(7,23,42,0.49)
        .bestCity
            .bestCityTitle
                width: 100%
                height: 5vh
                padding-top: 1.8vh
                .doubleLine
                    width: .11rem
                    height: 1.9vh
                    .wide
                        width: .07rem
                        height: 1.9vh
                        background : #41E6FD
                    .narrow
                        width: .02rem
                        height: 1.9vh
                        background : #41E6FD
                        margin-left: .02rem
                .bestCityName
                    font-size: .18rem
                    font-family: FZZXHJW--GB1-0
                    margin-left: .12rem
            .threeLine
                width: 100%
                height: .03rem
                .firstLine
                    width: 3.4rem
                    height: .03rem
                    background : #41E6FD
                .secondLine
                    width: .08rem
                    height: .03rem
                    background: #A7B5CD
                    margin-left: .06rem
                    margin-right: .04rem
                .thirdLine
                    width: .44rem
                    height: .03rem
                    background: #FFFFFF
            .cityAssess
                width: 4.02rem
                height: 16.2vh
                margin-top: 1.2vh
                margin-bottom: 1.6vh
                cursor:pointer
                li
                    width: 0.99rem
                    height: 16.2vh
                    border-right: 2px solid #A7B5CD
                    .timeAssess
                        Width :100%
                        height : 3.5vh
                        font-size: .18rem
                        line-height : 3.5vh
                        text-align :center
                    .itemCity
                        width: 100%
                        height: 6.3vh
                        line-height: 6.3vh
                        font-size: .24rem
                        text-align :center
                    .itemCity.active
                        background: #1E94E5
                    .assessNum.active
                        background: #1E94E5
                    .assessNum
                        width: 100%
                        height: 6.38vh
                        line-height: 6.38vh
                        font-size: .14rem
                        text-align :center
                        span 
                            font-size: .24rem
                li:last-child
                    border:none
            .drakYLine
                width: 100%
                height: .03rem
                background: #908A20
                margin-bottom: .09rem
            .cityImg
                width: 100%
                height: 10vh
                .firstImg
                    width: 1.96rem
                    height: 10vh
                    border: 2px solid #fff
                    margin-left: .06rem
                    margin-right: .09rem
                    position: relative
                    cursor:pointer 
                    overflow:hidden
                    .zhezhao
                        width:100%
                        line-height:27px
                        text-align : center
                        position : absolute
                        left: 0
                        bottom: 0
                        z-index: 2
                        font-size: 12px
                        background:rgba(28,28,28,.6)
                .secondImg
                    width: 1.78rem
                    height: 10vh
                    border: 2px solid #fff
                    position: relative   
                    cursor:pointer 
                    overflow:hidden
                    .zhezhao
                        width:100%
                        line-height: 27px
                        text-align : center
                        position: absolute   
                        left: 0
                        bottom: 0    
                        z-index: 2
                        font-size: 12px 
                        background:rgba(28,28,28,.6)  
</style>

